<template>
	<view class="content bg-#F6F9F8 h-100vh" :style="'background: url('+ossurl(data.back_image)+') no-repeat; background-size: 100% 50%;'">
		<custom_navbar :title="navbar_title" theme="dark" />
		<view class="infoBox">
			<view class="daolan" @click="daolan">
				<image src="@/static/images/line/daolan.png"  mode="aspectFit"></image>
			</view>
			<view class="title">{{data.title}}</view>
			<view class="desc">
				<view class="descLeft">
					<view class="item">
						<view class="itemImg">
							<image src="@/static/images/line/spot_a.png" mode="widthFix"></image>
						</view>
						<view class="itemTxt">
							<text class="num">{{data.points_count}}</text>
							<text class="str">景点</text>
						</view>
					</view>
				</view>
				<view class="descRight">
					<view class="item">
						<view class="itemImg">
							<image src="@/static/images/line/time_a.png" mode="widthFix"></image>
						</view>
						<view class="itemTxt">
							<text class="str">约</text>
							<text class="num">{{data.duration}}</text>
							<text class="str">分钟</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="dataList">
						  <view class="dataBoxBlock">
						 
						  <view class="dataBox" v-for="(info, index) in data.points_list" :key="index">
							  <view class="dataBoxLeft">
								  <view class="dian">{{(index+1)>9?(index+1):'0'+(index+1)}}</view>
							  </view>
							  <view class="dataBoxRight">
								<view class="dataTitle">
									<view class="dataTitleLeft">
										<image src="@/static/images/line/spot_a.png" mode="widthFix"></image>
									</view>
									<view class="dataTitleRight">{{info.title}}</view>
								</view>
								<view class="pic">
									<image :src="info.face" mode="scaleToFill"></image>
								</view>	
							  </view>
						  </view>	  
						  </view>
			</view>	  
			
			
		</view>	
		
		
	</view>	
</template>
<script>
import { navigateTo, navigateBack } from "@/hooks";
	import { getRouteDetail } from "@/api/home.js";
	import custom_navbar from "@/components/custom_navbar/index.vue";

	import { ossurl } from '@/utils/index';
	export default {
		components: { custom_navbar},
		data() {
			return {
				navigateTo,
				navbar_title: "推荐路线详情",
				spotId:0,
				id:0,
				data:{},
				
				
				
			}
		},
		computed: {
			rec_url() {
				return this.$store.getters.rec_url;
			}
		},
		onLoad(options) {
		    if (options.spot_id) {
		        this.spotId = Number(options.spot_id);
		    }
			if (options.id) {
				this.id = Number(options.id);
			}
		    this.dataList();
		},

		methods: {
			ossurl,

			dataList() {
				var _this =this;
			    let params = {
					id: _this.id,
					spot_id: _this.spotId
			    };
			    getRouteDetail(params).then(res => {
			        if (res.code == 200) {
						var d = res.data;
						d.back_image = ossurl(d.back_image);
						var many_image = d.many_image;
						many_image.forEach(function (v, k) {
							many_image[k] = ossurl(v);
						});	
						d.many_image = many_image;
						var points_list = d.points_list;
						points_list.forEach(function (v, k) {
							points_list[k]['face'] = ossurl(v.face);
						});	
						d.points_list = points_list;
						_this.data = d;
						
			        }
			    })
			},
			//路线
			daolan()
			{
				var _this = this;
				let str = this.map_nav_type_computed = 'map_nav';
				this.$store.commit('map/set_map_nav_type', str);
				uni.navigateTo({
					url:'/pagesA/rec_line/index?id='+ _this.id+'&spot_id='+ _this.spotId,
				})
			},
			
		}
	}
</script>

<style lang="scss">

	 .content{
		width: 100%; height: 100vh;
	 }

	.infoBox{
		margin-top: 400rpx;
		width: 750rpx;
		height: auto;
		background: #F6F9F8;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-top: 50rpx;
	}
	.daolan{ width:192rpx; height:192rpx; margin-left: 540rpx; margin-top: -140rpx;}
	.daolan image{ width: 192rpx; height: 192rpx;}
	.title{
				
					width: 100%;
					font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
					font-weight: 900;
					font-size: 44rpx;
					color: #000000;
					line-height: 60rpx;
					padding-left: 24rpx;
					
					 white-space: nowrap;      /* 防止文本换行 */
					  overflow: hidden;         /* 隐藏超出容器的文本 */
					  text-overflow: ellipsis;  /* 超出部分显示为省略号 */
				}
				.desc{
					width: 100%; height: 100rpx; display: flex;
					padding-left: 24rpx;
					.descLeft{
						width: 40%;
						.item{
							width: 100%;
							height: auto;
							display: flex;
							.itemImg{
								width: 60rpx;
								
								image{width: 40rpx; height: 40rpx; margin-top: 20rpx;}
							}
							.itemTxt{
								width: auto;
								color: #000000;
								text{margin: 0rpx 10rpx;}
								.num{ font-family: DIN-BlackItalic, DIN-BlackItalic;
	font-weight: 500;
	font-size: 48rpx;}
								.str{font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
	font-weight: 400;
	font-size: 28rpx;}
							}
						}
						
					}
					.descRight{
						width: auto;
						.item{
							width: 100%;
							height: auto;
							display: flex;
							.itemImg{
								width: 60rpx;
								image{width: 40rpx; height: 40rpx; margin-top: 20rpx;}
							}
							.itemTxt{
								width: auto;
								color: #000000;
								text{margin: 0rpx 10rpx;}
								.num{ font-family: DIN-BlackItalic, DIN-BlackItalic;
	font-weight: 500;
	font-size: 48rpx;}
								.str{font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
	font-weight: 400;
	font-size: 28rpx;}
							}
						}
						
					}
				
				
				}
				
	.dataList{ padding: 20rpx;}			
	.dataBoxBlock{ margin: 20rpx auto; width: 100%; height: auto;}
	.dataBox{width: 100%; height: auto; display: flex;}
	.dataBoxLeft{width: 88rpx; height: auto; border-left: 2rpx dashed #0CCA92; margin-left: 40rpx; }
	.dian{width: 52rpx; height: 52rpx; border-radius: 50%; background-color:#D7F0E8 ; margin-top: 0rpx; margin-left: -26rpx; font-size: 28rpx; color: #000000; text-align: center; line-height: 52rpx;}
	.dataBoxRight{width: auto; height: auto; background-color: #FFFFFF; border-radius: 24rpx; margin: 10rpx auto;}
	.dataTitle{ width: 100%; height: 80rpx; display: flex;}
	.dataTitle .dataTitleLeft{width: 80rpx; height: 80rpx;}
	.dataTitle .dataTitleLeft image{width: 40rpx; height: 40rpx; margin: 20rpx;}
	.dataTitle .dataTitleRight{font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
font-weight: 700;
font-size: 30rpx;
color: #3D3D3D; line-height: 80rpx;}
   .pic{
	   width: 590rpx; height: 280rpx;
   }
   .pic image{width: 550rpx; height: 260rpx; border-radius: 30rpx; margin:10rpx 20rpx;}
</style>